import React, { Component } from 'react'
import { Icon } from 'antd';
import './navigation.scss'
import {Link} from 'react-router-dom'

export default class index extends Component {
    constructor() {
        super()
        this.state = {
            img: []
        }
    }
    render() {
        return (
            <div className="navigation">
                <ul className="main clearfix">
                    <li className="c_navigation_nav">
                        <Icon type="align-left" />
                        <a href="/">商品分类</a>
                        <ul>
                            <li>
                                女装/男装/内衣
                                <div className="minute">
                                    <div className="left fl">
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>


                                    </div>
                                    <div className="right fl">
                                        <p>品牌推荐</p>
                                        {
                                            this.state.img.map(item => {
                                                return <div className="imgbox" key={item.id}>
                                                    <img src={item.url} alt="" />
                                                    <p>{item.title}</p>
                                                </div>
                                            })
                                        }

                                    </div>
                                </div>
                            </li>
                            <li>
                                女鞋/男鞋/箱包
                                <div className="minute">
                                    <div className="left fl">
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>


                                    </div>
                                    <div className="right fl">
                                        <p>品牌推荐</p>
                                        {
                                            this.state.img.map(item => {
                                                return <div className="imgbox" key={item.id}>
                                                    <img src={item.url} alt="" />
                                                    <p>{item.title}</p>
                                                </div>
                                            })
                                        }

                                    </div>
                                </div>
                            </li>
                            <li>
                                护肤彩妆/个护
                                <div className="minute">
                                    <div className="left fl">
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        

                                    </div>
                                    <div className="right fl">
                                        <p>品牌推荐</p>
                                        {
                                            this.state.img.map(item => {
                                                return <div className="imgbox" key={item.id}>
                                                    <img src={item.url} alt="" />
                                                    <p>{item.title}</p>
                                                </div>
                                            })
                                        }

                                    </div>
                                </div>
                            </li>
                            <li>
                                户外运动
                                <div className="minute">
                                    <div className="left fl">
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        

                                    </div>
                                    <div className="right fl">
                                        <p>品牌推荐</p>
                                        {
                                            this.state.img.map(item => {
                                                return <div className="imgbox" key={item.id}>
                                                    <img src={item.url} alt="" />
                                                    <p>{item.title}</p>
                                                </div>
                                            })
                                        }

                                    </div>
                                </div>
                            </li>
                            <li>
                                家电数码
                                <div className="minute">
                                    <div className="left fl">
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        

                                    </div>
                                    <div className="right fl">
                                        <p>品牌推荐</p>
                                        {
                                            this.state.img.map(item => {
                                                return <div className="imgbox" key={item.id}>
                                                    <img src={item.url} alt="" />
                                                    <p>{item.title}</p>
                                                </div>
                                            })
                                        }

                                    </div>
                                </div>
                            </li>
                            <li>
                                母婴童装
                                <div className="minute">
                                    <div className="left fl">
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        

                                    </div>
                                    <div className="right fl">
                                        <p>品牌推荐</p>
                                        {
                                            this.state.img.map(item => {
                                                return <div className="imgbox" key={item.id}>
                                                    <img src={item.url} alt="" />
                                                    <p>{item.title}</p>
                                                </div>
                                            })
                                        }

                                    </div>
                                </div>
                            </li>
                            <li>
                                手表配饰
                                <div className="minute">
                                    <div className="left fl">
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        

                                    </div>
                                    <div className="right fl">
                                        <p>品牌推荐</p>
                                        {
                                            this.state.img.map(item => {
                                                return <div className="imgbox" key={item.id}>
                                                    <img src={item.url} alt="" />
                                                    <p>{item.title}</p>
                                                </div>
                                            })
                                        }

                                    </div>
                                </div>
                            </li>
                            <li>
                                居家用品
                                <div className="minute">
                                    <div className="left fl">
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        

                                    </div>
                                    <div className="right fl">
                                        <p>品牌推荐</p>
                                        {
                                            this.state.img.map(item => {
                                                return <div className="imgbox" key={item.id}>
                                                    <img src={item.url} alt="" />
                                                    <p>{item.title}</p>
                                                </div>
                                            })
                                        }

                                    </div>
                                </div>
                            </li>
                            <li>
                                唯品生活
                                <div className="minute">
                                    <div className="left fl">
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        

                                    </div>
                                    <div className="right fl">
                                        <p>品牌推荐</p>
                                        {
                                            this.state.img.map(item => {
                                                return <div className="imgbox" key={item.id}>
                                                    <img src={item.url} alt="" />
                                                    <p>{item.title}</p>
                                                </div>
                                            })
                                        }

                                    </div>
                                </div>
                            </li>
                            <li>
                                唯品国际/唯品奢
                                <div className="minute">
                                    <div className="left fl">
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        

                                    </div>
                                    <div className="right fl">
                                        <p>品牌推荐</p>
                                        {
                                            this.state.img.map(item => {
                                                return <div className="imgbox" key={item.id}>
                                                    <img src={item.url} alt="" />
                                                    <p>{item.title}</p>
                                                </div>
                                            })
                                        }

                                    </div>
                                </div>
                            </li>
                            <li>
                                医药健康
                                <div className="minute">
                                    <div className="left fl">
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        <div className="line1 clearfix">
                                            <div className="title fl">
                                                冬季热卖
                                                <Icon type="right" className="fr" />
                                            </div>
                                            <div className="cont fl">
                                                <span>羽绒服</span>
                                                <span>卫衣</span>
                                                <span>毛衣</span>
                                                <span>休闲裤</span>
                                                <span>皮草皮衣</span>
                                                <span>大衣</span>
                                                <span>连衣裙</span>
                                                <span>套装</span>
                                            </div>
                                        </div>
                                        

                                    </div>
                                    <div className="right fl">
                                        <p>品牌推荐</p>
                                        {
                                            this.state.img.map(item => {
                                                return <div className="imgbox" key={item.id}>
                                                    <img src={item.url} alt="" />
                                                    <p>{item.title}</p>
                                                </div>
                                            })
                                        }

                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li style={{color:'#f10180',fontWeight:"bold"}}><Link to='/kiss'>首页</Link></li>
                    <li><a href="/">最后疯抢</a> </li>
                    <li><a href="/">唯品快抢</a></li>
                    <li><Link to="/gird">女装</Link></li>
                    <li><Link to="/baby">母婴</Link></li>
                    <li><a href="/">家电</a></li>
                    <li><a href="/">国际</a></li>
                    <li><a href="/">美妆</a></li>
                    <li><a href="/">鞋包</a></li>
                    <li><a href="/">男装</a></li>
                    <li><a href="/">预告</a></li>
                    <li><a href="/">更多</a></li>
                </ul>
            </div>
        )
    }
    componentDidMount() {
        this.getLiImg()
    }
    getLiImg = async () => {
        const res = await this.$axios.get(' http://localhost:5000/heard')

        this.setState({
            img: res.data[1].Liimg
        })
    }
}
